<template>
      
    <div class="calendar-wrapper">
      <!-- 月份变换区 -->
     
      <div class="header rowJcAc" v-if="headerBar">
        
        <transition name="fade">
        <div class="arrowIcon rowJcAc" @click="changeMonth('pre')" v-if="monthOpen">
            <el-icon><ArrowLeftBold /></el-icon>
            
        </div>
      </transition>
       
        <div class="yearMonth">{{y+'年'+formatNum(m)+'月'}}  
          <el-button  class="toTodayButton" round @click="toToday(this.today)" icon="RefreshRight"></el-button></div>

       

      <transition name="fade">

      
          <div class="arrowIcon rowJcAc" @click="changeMonth('next')" v-if="monthOpen">
            
            <el-icon><ArrowRightBold /></el-icon>
            
        </div>

      
        
      </transition>
      </div>
     
      <!-- 星期区 -->
      <div class="week">
        <div class="week-day" v-for="(item,index) in weekDay" :key="index">{{item}}</div>
      </div>
  
      <!-- 日历显示区 -->

      <Transition name="fade">
      <div :class="{hide : !monthOpen}" class="content">
        <div :style="{top:positionTop + 'px'}" class="days">
          <div class="item rowJcAc" v-for="(item,index) in dates" :key="index">
            <div
              class="day"
              @click="selectOne(item,$event)"
              :class="{
                choose:choose==`${item.year}-${item.month}-${item.date}`,
                todayChoose: isTodayChoose(item.year,item.month,item.date) ,
                nolm:!item.isCurM,
                today:isToday(item.year,item.month,item.date),
            }"
            >
            <div class="markDay" v-if="isMarkDay(item.year,item.month,item.date)" 
            :class="[choose==`${item.year}-${item.month}-${item.date}` ? 'markDayChoose':'markDayNoChoose']"></div>
            {{Number(item.date)}}</div>
            
          </div>
        </div>
      </div>
      </Transition>
      <!-- 伸缩按钮：待定 -->
      <div class="bottomLine rowJcAc" v-if="collapsible" @click="toggle">
        <div></div>
      </div>

    </div>
  </template>

  <script>
import '../utils/mitt.js'
import useStore from '../store'
import mitt from '../utils/mitt.js';
  export default {
    name: "ren-calendar",
    props: {
      // 星期几为第一天(0为星期日)
      weekstart: {
        type: Number,
        default: 0,
      },
      // 标记的日期
      markDays: {
        type: Array,
        default: () => {
          return [];
        },
      },
      //是否展示月份切换按钮
      headerBar: {
        type: Boolean,
        default: true,
      },
      // 是否展开
      open: {
        type: Boolean,
        default: true,
      },
      //是否可收缩
      collapsible: {
        type: Boolean,
        default: true,
      },
      //未来日期是否不可点击
      disabledAfter: {
        type: Boolean,
        default: false,
      },
      // 默认选中日期
      selectDate: {
        type: String,
        default: null
      }
    },
    data() {
      return {
        weektext: ["日", "一", "二", "三", "四", "五", "六"],
        y: new Date().getFullYear(), // 年
        m: new Date().getMonth() + 1, // 月
        dates: [], // 当前月的日期数据
        positionTop: 0,
        monthOpen: true,
        choose: "",
        isCurM: true,
        today:{},
        Tag:0
      };
    },
    created() {
      this.dates = this.monthDay(this.y, this.m);
      
      // !this.open && this.toggle();
    },
    watch: {
      // 点击返回今天
      selectDate() {
        if(this.selectDate) {
          this.choose = this.selectDate
          this.y = Number(this.selectDate.split('-')[0])
          this.m = Number(this.selectDate.split('-')[1])
          this.dates = this.monthDay(this.y, this.m);
          if(!this.monthOpen) {
            let index = -1;
            this.dates.forEach((i, x) => {
              this.isChoose(i.year, i.month, i.date) && (index = x);
            });
            this.positionTop = -((Math.ceil((index + 1) / 7) || 1) - 1) * 42;
          }
        }
        
        
      },
      m() {
        this.$emit('changeMonth',{year: this.y,month: this.m})
      },
      dates() {
        this.$emit('changeDates',{dates: this.dates})
      }
    },
    mounted() {
      
      useStore().user.setToday(this.getToday())
      let nowDate = new Date();
      
      this.today  = {
        date:nowDate.getDate(),
        month:(nowDate.getMonth()+1),
        year:nowDate.getFullYear()}
     
      this.today = this.formatDate(this.today)
      this.selectOne(this.today)
      if(this.selectDate) {
        this.choose = this.selectDate
        this.y = this.selectDate.split('-')[0]
        this.m = this.selectDate.split('-')[1]
      }else {
        this.choose = this.getToday().date;
      }
      useStore().user.setSelectDay(this.getToday().date);
      this.toggle()
      
    },
    computed: {
      // 顶部星期栏
      weekDay() {
        return this.weektext
          .slice(this.weekstart)
          .concat(this.weektext.slice(0, this.weekstart));
      },
    },
    methods: {
      toToday(today){
       
        console.log(today)
          let afterFormatDate = this.formatDate(today)
         
        console.log(afterFormatDate)
          this.selectOne(afterFormatDate)
       
         
         console.log(afterFormatDate)

         
          
          this.changYearMonth(today.year,today.month)

      
      },
      formatDate({ year, month, date }) {
        month = (/^\d{2}$/.test(month) ? month : `0${month}`);
        date = parseInt(date,10)
        date = (date < 10 ? `0${date}` : `${date}`);

      
        
        console.log(date)
        return {year,month,date};
      },
      formatNum(num) {
        let res = Number(num);
        return res < 10 ? "0" + res : res;
      },
      getToday() {
        let date = new Date();
          let y = date.getFullYear();
          let m = date.getMonth();
          let d = date.getDate();
        
        let week = new Date().getDay();
        let weekText = ["日", "一", "二", "三", "四", "五", "六"];
        let formatWeek = "星期" + weekText[week];
        let today = {
          date: y + "-" + this.formatNum(m + 1) + "-" + this.formatNum(d),
          week: formatWeek,
        };

        return today;
      },
      // 获取当前月份数据
      monthDay(y, month) {
        let dates = [];
        let m = Number(month);
        let firstDayOfMonth = new Date(y, m - 1, 1).getDay(); // 当月第一天星期几
        let lastDateOfMonth = new Date(y, m, 0).getDate(); // 当月最后一天
        let lastDayOfLastMonth = new Date(y, m-1, 0).getDate(); // 上一月的最后一天
        let weekstart = this.weekstart == 7 ? 0 : this.weekstart;
        let startDay = (() => {
          // 周初有几天是上个月的
          if (firstDayOfMonth == weekstart) {
            return 0;
          } else if (firstDayOfMonth > weekstart) {
            return firstDayOfMonth - weekstart;
          } else {
            return 7 - weekstart + firstDayOfMonth;
          }
        })();
        let endDay = 7 - ((startDay + lastDateOfMonth) % 7); // 结束还有几天是下个月的
        for (let i = 1; i <= startDay; i++) {
          dates.push({
            date: this.formatNum(lastDayOfLastMonth - startDay + i),
            day: weekstart + i - 1 || 7,
            month: m - 1 >= 1 ? this.formatNum(m - 1) : 12,
            year: m - 1 >= 1 ? y : y - 1,
            isCurM: false
          });
        }
        for (let j = 1; j <= lastDateOfMonth; j++) {
          dates.push({
            date: this.formatNum(j),
            day: (j % 7) + firstDayOfMonth - 1 || 7,
            month: this.formatNum(m),
            year: y,
            isCurM: true, //是否当前月份
          });
        }
        for (let k = 1; k <= endDay; k++) {
          dates.push({
            date: this.formatNum(k),
            day: (lastDateOfMonth + startDay + weekstart + k - 1) % 7 || 7,
            month: m + 1 <= 12 ? this.formatNum(m + 1) : 1,
            year: m + 1 <= 12 ? y : y + 1,
            isCurM: false
          });
        }
     
        return dates;
      },
      isFutureDay(y, m, d) {
        //是否未来日期
        let ymd = `${y}/${m}/${d}`;
        let formatDY = new Date(ymd.replace(/-/g, "/"));
        let showTime = formatDY.getTime();
        let curTime = new Date().getTime();
        if (showTime > curTime) {
          return true;
        } else {
          return false;
        }
      },
      // 标记日期
      isMarkDay(y, m, d) {
        let flag = false;
        for (let i = 0; i < this.markDays.length; i++) {
          let dy = `${y}-${m}-${d}`;
          if (this.markDays[i] == dy) {
            flag = true;
            break;
          }
        }
        return flag;
      },
      isToday(y, m, d) {
        let checkD = y + "-" + m + "-" + d;
        let today = this.getToday().date;
        if (checkD == today) {
          return true;
        } else {
          return false;
        }
      },
      isTodayChoose(year,month,day) {
        let checkD = year + "-" + month + "-" + day;
        let today = this.getToday().date;
        return this.choose == `${year}-${month}-${day}` && checkD == today
      },
      isChoose(y,m,d) {
        let checkD = y + "-" + m + "-" + d;
        return this.choose == checkD
      },
      // 展开收起
      toggle() {
        this.monthOpen = !this.monthOpen;
        if (this.monthOpen) {
          this.positionTop = 0;
        } else {
          let index = -1;
          this.dates.forEach((i, x) => {
            this.isChoose(i.year, i.month, i.date) && (index = x);
          });
          this.positionTop = -((Math.ceil((index + 1) / 7) || 1) - 1) * 42;
        }
      },
      // 点击回调
      selectOne(i) {
        
        let markDay = this.isMarkDay(i.year, i.month, i.date);

        console.log(i)
        

        let date = `${i.year}-${i.month}-${i.date}`;

 
  
        let selectD = new Date(date).getTime();
        let curTime = new Date().getTime();
     
        let week = new Date(date).getDay();
        let weekText = ["日", "一", "二", "三", "四", "五", "六"];
        let formatWeek = "星期" + weekText[week];
        let response = {
          date: date,
          week: formatWeek,
        };
        useStore().user.setSelectDay(date)
       
        mitt.emit('getSelectedDate',date)
        
      
  
        if (selectD > curTime) {
          if (this.disabledAfter) {
            console.log("未来日期不可选");
  
            return false;
          } else {
            this.choose = date;
            if (markDay && i.isCurM) {
              this.$emit("onDayClick", response);
            }
          }
        } else {
          this.choose = date;
          if (i.isCurM) {
            this.$emit("onDayClick", response);
          }else {
            this.y = i.year
            this.m = i.month
            this.dates = this.monthDay(this.y, this.m);
            this.$emit("onDayClick", response);
          }
        }
        this.$emit("setDate", response);
        
      },
      //改变年月
      changYearMonth(y, m) {
        this.dates = this.monthDay(y, m);
        this.y = y;
        this.m = m;
      },
      changeMonth(type) {
      
        this.y = parseInt(this.y)
        this.m = parseInt(this.m)
        if (type == "pre") {
  
          if (this.m + 1 == 2) {
            this.m = 12;
            this.y = parseInt(this.y) - 1;
          } else {
            this.m = this.m - 1;
          }
        } else {
          if (this.m + 1 == 13) {
            this.m = 1;
            this.y = this.y + 1;
          } else {
            this.m = this.m + 1;
          }
        }
        this.dates = this.monthDay(this.y, this.m);
        // this.$emit("changeMonth");
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
    div{
        font-family: 'pingfang';
        font-weight: bold;
    }
  .bottomLine {
    padding-top: 12px;
    padding-bottom: 12px;
    display: flex;
    justify-content: center;
    >div {
      width: 32px;
      height: 3px;
      background: #DADEF0;
      border-radius: 2px;
    }
  }
  .nolm {
    color: #CFD4DB !important;
  }
  .calendar-wrapper {
    width:500px;

    text-align: center;
    background-color: #fff;
    // box-shadow: 0px 6px 10px 0px rgba(131,134,163,0.12);
    // box-shadow: 7px 7px 12px rgba(0, 0, 0, .4),
    //         -7px -7px 12px rgba(255, 255, 255, .9),
    //         inset 0 0 0 rgba(255, 255, 255, .9),
    //         inset 0 0 0 rgba(0, 0, 0, .4);
    padding: 10px;
    border-radius: 25px;
    transition:all  0.6s ease-in-out;

    .toTodayButton{

      padding: 20px;
         
        }
    .header {
        display: flex;
        justify-content: center;
        align-items: center;
   
      .yearMonth {
        font-size: 16px;
        line-height: 23px;
      
        color: #333843;
        width: 60%;
        margin-left: 40px;
        button{
          margin-left: 40px;
          padding: 10px;
        }
      }
  
      
    }
  
    .week {
      display: flex;
      justify-content: space-around;
      width: 100%;
      align-items: center;
      height: 19px;
      line-height: 19px;
      font-size: 13px;
      
      margin-top: 20px;
      color: #989DB3;
      transition: 0.6s ease-in-out;
    }
  

    .content {
      position: relative;
      overflow: hidden;
      height: 212px;
      transition: all 0.5s ease;
      .days {
        transition: top 0, 3s;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        position: relative;
        font-size: 20px;
        line-height: 19px;
        
        .item {
          position: relative;
          display: block;
          height: 42px;
          line-height: 42px;
          width: calc(100% / 7);
  
          .day {
            font-style: normal;
            display: inline-block;
            position: relative;
            vertical-align: middle;
            width: 36px;
  
            height: 36px;
            line-height: 36px;
            overflow: hidden;
            border-radius: 50%;
            transition: all 0.4s ease;

          
            &.choose {
              background-color: #9EA8BA;
              color: #fff;
            }
            &.todayChoose {
              background-color: #1A7AF8 !important;
              color: #fff;
            }
  
          }
          
  
          .notSigned {
            font-style: normal;
            width: 8rpx;
            height: 8rpx;
            background: #fa7268;
            border-radius: 10rpx;
            position: absolute;
            left: 50%;
            bottom: 0;
            pointer-events: none;
          }
          .today {
            color: #1A7AF8;
            background-color: #fff;
          }
          .markDayNoChoose {
            background: #1A7AF8;
          }
          .markDayChoose {
            background: #fff;
          }
          .markDay {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            position: absolute;
            left: 16px;
            bottom: 4px;
            pointer-events: none;
          }
        }
      }
    }
  
    .hide {
      transition: height 0.5s ease;
      height: 42px !important;
    }
  
    // .weektoggle {
    //   width: 85px;
    //   height: 32px;
    //   position: relative;
    //   left: 50%;
    //   margin-left: -42px;
    //   bottom: -42px;
    //   &.down {
    //     transform: rotate(180deg);
    //     bottom: 0;
    //   }
    // }

    .arrowIcon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30%;
        
    }
    
 

  // @keyframes height {
  //   0% { height: 00%;}
  //   30% {height: 30%;}
  //   50% { height: 50%;}
  //   70% { height: 70%;} 
  //   100% { height: 100%;}
  // }

  }
  </style>